起手式(Client)

2019 iT 邦幫忙鐵人賽

DAY 4

Modern Web

Next + Ant + Apollo Graphql + Mongo 後台系統製作與發佈系列第 4 篇

2019鐵人賽

polo

2018-10-18 02:40:46

1922 瀏覽

分享至

Next.js 因為SSR的關係所以會有一些比SPA複雜的設定

先設定 .babelrc

{
  "env": {
    "development": {
      "presets": [
        "next/babel"
      ]
    },
    "production": {
      "presets": [
        "next/babel"
      ]
    },
    "production-digital": {
      "presets": [
        "next/babel"
      ]
    },
    "production-heroku": {
      "presets": [
        "next/babel"
      ]
    },
    "test": {
      "presets": []
    }
  },
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ],
    "transform-decorators-legacy",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

Next.js 本身已經配備有 next/babel 但是有些 plugin 還是要安裝如上面的設定擋

transform-decorators-legacy
styled-components

next.config.js 安裝@zeit/next-css antd 需要

const withCSS = require('@zeit/next-css')
https://github.com/zeit/next-plugins/tree/master/packages/next-css

Next with Ant 接下來在 pages/_document.js 底下打上下面的程式碼

import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
import stylesheet from 'antd/dist/antd.min.css'

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    )
    const styleTags = sheet.getStyleElement()
    return { ...page, styleTags }
  }

  render() {
    return (
      <html>
        <Head>
          <title>My page</title>
          {this.props.styleTags}
          <link rel="stylesheet" href="/_next/static/style.css" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta charSet="utf-8" />
          <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

_document.js 原本是next已經包好的內建檔案,next 允許覆蓋所以程式碼會看起來多一些實際上ant需要的是這個引入
import stylesheet from 'antd/dist/antd.min.css'
另外如果有用 styled-component
getInitialProps 這個是在server端先去呼叫前端拿到className 在SSR中先定義好與Client 一致化才不會噴錯初學者常會卡在這邊

總結

因為SSR的關係所以會有些設定比較繁瑣,只要按照以上方法設定就可以開始使用 Next with Ant or Styled-Components